<template>
  <div class="home-cate-list">
    <van-swipe :autoplay="3000" class="home-swiper">
      <van-swipe-item>
        <!-- vant 的九宫格组件 -->
        <!-- 因为有轮播效果, 两页 -->
        <!-- 把它放在轮播图组件内 -->
        <van-grid square :column-num="5">
          <van-grid-item v-for="item in cateList1" :key="item.id">
            <van-image style="width: 42px; height: 42px;" :src="item.imgUrl" />
            <p class="cate-list-text">{{ item.text }}</p>
          </van-grid-item>
        </van-grid>
      </van-swipe-item>
      <van-swipe-item >
        <van-grid square :column-num="5">
          <van-grid-item v-for="item in cateList2" :key="item.id">
            <van-image style="width: 42px; height: 42px;" :src="item.imgUrl" />
            <p class="cate-list-text">{{ item.text }}</p>
          </van-grid-item>
        </van-grid>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface CateGoods {
  id: number
  text: string
  imgUrl: string
}

// 准备数据
const cateList1 = ref<CateGoods[]>([
  { id: 1, text: '京东超市', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 2, text: '数码电器', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 3, text: '京东新百货', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 4, text: '京东生鲜', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 5, text: '京东到家', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png' },
  { id: 6, text: '充值缴费', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 7, text: '附近好店', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 8, text: 'plus会员', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 9, text: '京东国际', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 10, text: '京东拍卖', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' }
])

const cateList2 = ref<CateGoods[]>([
  { id: 1, text: '京东超市', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 2, text: '数码电器', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 3, text: '京东新百货', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 4, text: '京东生鲜', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 5, text: '京东到家', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 6, text: '充值缴费', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 7, text: '附近好店', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png' },
  { id: 8, text: 'plus会员', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 9, text: '京东国际', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 10, text: '京东拍卖', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' }
])
</script>

<style lang="scss" scoped>
.home-cate-list {
  margin-top: 5px;
  height: 160px;
}

.home-swiper {
  padding-bottom: 20px;
}

.cate-list-text {
  font-size: 12px;
}
</style>
